<template>
  <view class="store-page">
    <view class="header">
      <!-- <view class="logo">本维美logo</view> -->
      <view class="search">
        <u-search
          height="80rpx"
          searchIconColor="#4b3138"
          :showAction="false"
          placeholder="搜索所有产品"
          margin="0 15rpx 0 0 "
          v-model="keyword"
          @search="searchFocus"
          @clear="searchClear"
        ></u-search>
      </view>
      <!-- <view class="advertisement">
        <scroll-view scroll-x="true">
          <view class="horizontal">
            <view
              v-for="(item, index) in horizontalArr"
              class="horizontali"
              :key="index"
              @click="activeShow = index + 1"
              :class="activeShow == index + 1 ? 'active' : 'noActive'"
            >
              {{ item }}
            </view>
          </view>
        </scroll-view>
      </view> -->
    </view>
    <view class="srcroll">
      <scroll-view scroll-y class="scrollView" @scrolltolower="loadMore" @scroll="handleScroll">
        <view class="recommend" v-if="recommend.length > 0">
          <view
            v-for="(item, index) in recommend"
            @click="pagoTo(item.id)"
            :key="index"
            class="recommendi"
          >
            <view class="image">
              <image v-if="item.goodImgOut" :src="baseImgUrl + item.goodImgOut" mode=""></image>
              <image v-else :src="baseImgUrl + item.goodImg" mode=""></image>
            </view>
            <view class="name">{{ item.goodName }}</view>
            <view
              class="hearts"
              :class="item.isCollect == 1 ? 'heartActive' : 'heart'"
              @click.stop="ClickHeart(item.id, index)"
            ></view>
            <view class="leftRight">
              <view class="left">
                <view class="introduce">
                  <view>规格：{{ item.goodSpecs || "无规格" }}</view>
                  <view>销量：{{ item.virtualSales || 0 }}</view>
                </view>
                <view class="price">
                  {{ "￥" + item.retailPrice }}
                </view>
                <view class="VipPrice" v-if="item.discountPrice">
                  <view class="vip">
                    <!-- 会员价 -->
                  </view>
                  <span>￥{{ item.discountPrice }}</span>
                </view>
              </view>
			  <!--                 v-if="!item.ifPurchase" -->
  <!--            <view
                class="right"
                @click.stop="addShoppingCart(item.id)"
              >
                <u-icon name="plus" color="#fff" size="15"></u-icon>
              </view> -->
            </view>
          </view>
        </view>
        <Empty v-else />
      </scroll-view>
    </view>
    <!-- <ShoppingCart class="ShoppingCart"></ShoppingCart> -->
  </view>
</template>

<script>
import productApi from "@/api/product";
import shoppingCartApi from "@/api/shoppingCart";
import collectApi from "@/api/collect";
import ShoppingCart from "../ShoppingCart/index.vue";
import { baseImgUrl } from "@/config";
import login from "../../api/login";
import { getToken } from "@/utils/auth";
export default {
  name: "productList",
  components: {
    ShoppingCart,
  },
  data() {
    return {
      baseImgUrl,
      activeShow: 1,
      recommend: [],
      heartShow: [],
      keyword: "",
      // horizontalArr: [
      //   "单品",
      //   "大礼包",
      //   "VIP套盒",
      //   "积分商品",
      //   "默认分类",
      //   "112233",
      // ],
      classifyId: null,
	  pageNum:1,
	  pageSize:100,
	  total:0
    };
  },

  async onLoad(options) {
    this.classifyId = options.id;
    this.getGoodList();
  },
  async onShow() {},
  	
	onPullDownRefresh() {
		// 重置页码
		this.pageNum = 1;
		// 重新获取数据
		Promise.all([this.getGoodList()]).finally(() => {
			// 停止下拉刷新动画
			uni.stopPullDownRefresh();
		});
	},
  methods: {
	  loadMore() {
	  	if (this.total > this.pageNum * this.pageSize) {
	  		this.pageNum++;
	  		this.getPageGoodList()
	  	}
	  },
	  getPageGoodList(goodName = "") {
      let params = {
        classOneId: this.classifyId,
        goodName,
		pageNum:this.pageNum,
		pageSize:this.pageSize,
      };
      if (goodName != "") {
        delete params.classOneId;
      } else {
        delete params.goodName;
      }
      productApi.getGoodList(params).then((res) => {
        if (res.code == 200) {
          this.recommend = [...this.recommend,...res.rows];
		  this.total = res.total
        }
      });
    },
    getGoodList(goodName = "") {
      let params = {
        classOneId: this.classifyId,
        goodName,
		pageNum:this.pageNum,
		pageSize:this.pageSize,
      };
      if (goodName != "") {
        delete params.classOneId;
      } else {
        delete params.goodName;
      }
      productApi.getGoodList(params).then((res) => {
        if (res.code == 200) {
          this.recommend = res.rows;
		  this.total = res.total
        }
      });
    },
    searchFocus() {
      this.getGoodList(this.keyword);
    },
    searchClear() {
      this.getGoodList(this.keyword);
    },
    pagoTo(id) {
		let token = getToken();
		// if (!token) {
		// 	return
		// }
      uni.navigateTo({
        url: `/subPages/details/goodDetail?id=${id}`,
      });
    },
    // 收藏
    ClickHeart(id, index) {
      collectApi.saveCollect({ itemId: id }).then((res) => {
        if (res.code == 200) {
          this.recommend[index].isCollect =
            this.recommend[index].isCollect == 1 ? 0 : 1;
          uni.showToast({
            title: `${
              this.recommend[index].isCollect == 1 ? "收藏" : "取消收藏"
            }成功`,
            icon: "none",
            mask: true,
          });
        }
      });
    },
    addShoppingCart(id) {
      let data = {
        productId: id,
        cartNum: 1,
      };
      shoppingCartApi.addShoppingCart(data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "加购成功！",
            icon: "none",
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.store-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;

  .ShoppingCart {
    width: 120rpx;
    height: 120rpx;
    position: fixed;
    bottom: 6%;
    right: 6%;
    z-index: 99;
  }

  .header {
    width: 100%;
    padding: 0 28rpx;
    // height: 32%;
    // background: linear-gradient(to right, #FCE5D8, #FEB7D5);
    background-color: #fff;

    .logo {
      background-color: #fee7eb;
      border-radius: 20px;
      width: 200rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
    }

    .search {
      width: 100%;
      height: 150rpx;
      padding: 28rpx 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        width: 100rpx;
        height: 95rpx;
        display: flex;
        justify-content: end;

        .image {
          width: 98%;
          height: 100%;
        }
      }
    }

    // .advertisement {
    //   width: 100%;
    //   height: 60rpx;
    //   display: flex;
    //   align-items: center;
    //   overflow: hidden;

    //   .horizontal {
    //     height: 100%;
    //     white-space: nowrap;

    //     .horizontali {
    //       display: inline-block;
    //       white-space: nowrap;
    //       height: 50rpx;
    //       width: auto;
    //       font-size: 25rpx;
    //       padding: 0 20rpx;
    //       margin-right: 26rpx;
    //       border-radius: 5px;
    //       line-height: 50rpx;
    //       box-sizing: border-box;
    //     }

    //     .active {
    //       background-color: #ff4254;
    //       color: #fff;
    //     }

    //     .noActive {
    //       background-color: #f6f6f6;
    //       color: #656565;
    //     }
    //   }
    // }
  }

  .srcroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0 28rpx;
  }

  .scrollView {
    width: 100%;

    // height: 100%;
    .recommend {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .recommendi {
      width: 48%;
      margin: 20rpx 0;
      position: relative;

      .hearts {
        position: absolute;
        top: 40rpx;
        right: 40rpx;
        width: 60rpx;
        height: 60rpx;
      }

      .heart {
        background: url("../../static/images/home/heart.png") no-repeat;
        background-size: 100%;
      }

      .heartActive {
        background: url("../../static/images/home/heart_active.png") no-repeat;
        background-size: 100%;
      }

      .image {
        width: 100%;
        height: 335rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 8%;
        }
      }

      .name {
        width: 100%;
        font-size: 28rpx;
        line-height: 55rpx;
        font-weight: 600;
      }

      .leftRight {
        display: flex;
        position: relative;

        .left {
          width: calc(100% - 20rpx);

          .text {
            color: #858585;
          }

          .introduce {
            width: 100%;
            font-size: 26rpx;
          }

          .price {
            width: 100%;
            height: 60rpx;
            font-size: 35rpx;
            line-height: 60rpx;
            font-weight: 600;
          }

          .VipPrice {
            width: 180rpx;
            height: 40rpx;
            background-color: #fee6c3;
            border-radius: 3px;
            display: flex;

            .vip {
              width: 50%;
              height: 100%;
              background: url("../../static/images/home/vip.png") no-repeat;
              background-size: 100% 100%;
              display: initial-block;
            }

            span {
              text-align: center;
            }
          }
        }

        .right {
          position: absolute;
          width: 20px;
          height: 20px;
          background-color: #ff4254;
          border-radius: 3px;
          bottom: 0;
          right: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
